<template>
  <div>
    <el-backtop :right="100" :bottom="200" :visibility-height="10" />
    <!-- 搜索 -->
    <el-space wrap style="margin-bottom:10px">
      <el-input v-model="title" placeholder="请输入商品名称" clearable />
      <el-input v-model="id" placeholder="请输入商品条形码" clearable />
      <el-select v-model="status" placeholder="请选择商品状态" clearable>
        <el-option
          v-for="item in ostatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-cascader
        v-model="categoryId"
        :options="options"
        :props="props"
        placeholder="请选择类目"
        clearable
      />
      <el-button type="primary" :icon="Search" @click="listData">查找</el-button>
      <el-button type="primary" :icon="Plus" @click="Add" v-promis="'product:product:create'">添加</el-button>
      <!-- v-promis="''" -->
    </el-space>
    <!-- 列表 -->
    <el-table :data="tableData" style="width: 80%" border>
      <el-table-column type="selection" width="55" />
      <el-table-column type="expand" label="sku信息" width="60">
        <template #default="scope">
          <el-table :data="scope.row.skuList" border style="width: 100%">
            <el-table-column prop="barCode" label="商品条形码" align="center" />
            <el-table-column prop="title" label="商品规格" align="center" />
            <el-table-column prop="stock" label="商品库存" align="center" />
            <el-table-column prop="originalPrice" label="原价" align="center" />
            <el-table-column prop="price" label="现价" align="center" />
            <el-table-column prop="vipPrice" label="VIP价格" align="center" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="商品ID" align="center" />
      <el-table-column prop="title" label="名称" align="center" />
      <el-table-column prop="img" label="图片" align="center">
        <template #default="scope">
          <img :src="scope.row.img" class="table-img" />
        </template>
      </el-table-column>
      <el-table-column prop="description" label="商品详细介绍" align="center">
        <template #default="scope">
          <el-button  type="primary" @click="handleSee(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="categoryId" label="类目ID" align="center" />
      <el-table-column prop="freightTemplateId" label="邮费模板ID" align="center" />
      <el-table-column prop="sales" label="销量" align="center" />
      <el-table-column prop="unit" label="单位" align="center" />
      <el-table-column prop="status" label="是否在售" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status?'success':''">{{scope.row.status?"在售":"未售"}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" align="center" />
      <el-table-column align="center" label="操作" width="180">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)"  v-promis="'product:product:edit'" >编辑</el-button>
          <el-button
            :type="scope.row.status?'warning':''"
            @click="handleStatus(scope.row)"
          >{{scope.row.status?'下架':'上架'}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改弹框 -->
    <el-dialog v-model="dialogFormVisible" title="商品详情">
      <img v-for="i in imglist" :src="i" :key="i" class="dialog-detail-img" />

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible=false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <dome v-bind="domes" @limits="limits" @pages="pages" />
  </div>
</template>
<script>
import { post } from "@/util/http";
import dome from "../../../components/Dome.vue";
import { Search, Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
export default {
  components: {
    dome,
  },
  data() {
    return {
      Search,
      Plus,
      title: "", //搜索
      id: "", //搜索
      status: "", //搜索
      categoryId: "", //搜索
      tableData: [], //列表
      imglist: [], //查看列表----图片
      dialogFormVisible: false, //布尔值
      options: [], //类目数据
      // 类目的配置
      props: {
        value: "id",
        label: "title",
        children: "childrenList",
        emitPath: false,
      },
      // 分页
      domes: {
        limit: 10,
        page: 1,
        total: 10,
      },
      //   商品状态
      ostatus: [
        {
          value: 0,
          label: "下架",
        },
        {
          value: 1,
          label: "上架",
        },
      ],
    };
  },
  created() {
    this.listData();
    this.categoryData();
  },
  methods: {
    // 编辑
    handleEdit(e) {
      this.$router.push({
        path: "/index/commodity/productEnit",
        query: { id: e.id },
      });
    },
    // 添加
    Add() {
      this.$router.push({ path: "/index/commodity/productAdd" });
    },
    // 查看
    handleSee(e) {
      post({
        _gp: "admin.product",
        _mt: "detail",
        spuId: e.id,
      }).then((res) => {
        if (200 == res.data.errno) {
          this.imglist = res.data.data.imgList;
        }
      });
      this.dialogFormVisible = true;
    },
    // 类目列表
    categoryData() {
      let data = {
        _gp: "admin.category",
        _mt: "list",
      };
      post(data)
        .then((res) => {
          if (200 == res.data.errno) {
            this.options = res.data.data.items;
          }
        })
      
    },
    // 状态改变
    handleStatus(e) {
      let data = {
        _gp: "admin.product",
        _mt: "freezeOrActivation",
        spuId: e.id,
        status: e.status,
      };
      post(data)
        .then((res) => {
          if (200 == res.data.errno) {
            if (e.status == 1) {
              //判断当前的status如果为1就改为0，改为冻结状态
              e.status = 0;
              this.listData(); //激活冻结请求事件----刷新
              ElMessage.success("下架成功");
            } else if (e.status == 0) {
              //判断当前的status如果为0就改为1，改为激活状态
              e.status = 1;
              this.listData();
              ElMessage.success("上架成功");
            }
          }
        })
        
    },
    // 列表
    listData() {
      let data = {
        _gp: "admin.product",
        _mt: "list",
        title: this.title,
        id: this.id,
        categoryId: this.categoryId,
        status: this.status,
        page: this.domes.page, //当前页码
        limit: this.domes.limit, //页码长度
      };
      post(data)
        .then((res) => {
             console.log(res,55555555);
          if (200 == res.data.errno) {
            this.tableData = res.data.data.items;
            this.domes.total = res.data.data.total;
            ElMessage.success("请求成功");
            console.log(res, "商品列表成功");
          } 
        })
    },
    limits(e) {
      this.domes.limit = e;
      this.$nextTick(() => {
        this.listData();
      });
    },
    pages(e) {
      this.domes.page = e;
      this.$nextTick(() => {
        this.listData();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.table-img {
  width: 50px;
}
// 查看的图片
.dialog-detail-img {
  width: 100%;
}
</style>